
/* flex */
.flex {
  &-box {
    display: flex;
    flex-direction: row;
    justify-content: center;
    /*
      主轴的对齐方式
      ┌──────────────────┐
      |    ▇ ▇ ▇ ▇    |
      └──────────────────┘
    */
    align-items: center;

    /*
      交叉轴的对齐方式
      ┌──────────────────┐
      |    ▇ ■ - █ -    |
      └──────────────────┘
    */
    &.hide {
      display: none;
    }

    & > .flex-auto {
      width: 1px;
      overflow: auto;
    }
  }

  &-item {
    flex: 1;
  }

  &-inline {
    display: inline-flex;
  }

  &-column {
    flex-direction: column;

    & > * {
      width: 100%;
    }

    & > .flex-auto {
      width: 100%;
      // height: 1px;
      overflow: auto;
    }
  }

  &-start {
    justify-content: start;
  }

  &-top {
    align-items: flex-start;
  }

  &-end {
    justify-content: end;
  }

  &-bottom {
    align-items: flex-end;
  }

  &-between {
    justify-content: space-between;
  }

  &-row-reverse {
    flex-direction: row-reverse;
  }

  &-col-reverse {
    flex-direction: column-reverse;
  }

  &-around {
    justify-content: space-around;
  }

  &-wrap {
    flex-wrap: wrap;
  }
}
///////////////////////////////////////

.pos {
  &-rel {
    position: relative;
  }

  &-sty {
    position: sticky;
  }

  &-abs {
    position: absolute;
  }

  &-fix {
    position: fixed;
  }
}